<template>
  <div v-if="show" class="replay-dialog">
    <div class="dialog-content">
      <h3>对局回放</h3>
      
      <div class="replay-board">
        <div class="chess-board">
          <div v-for="row in 8" :key="row" class="board-row">
            <div 
              v-for="col in 8" 
              :key="col" 
              class="board-cell"
              :class="[getCellColor(row, col)]"
            >
              <ChessPiece
                v-if="getPiece(row-1, col-1)"
                :piece="getPiece(row-1, col-1)"
                :mini="false"
              />
            </div>
          </div>
        </div>

        <div class="move-list">
          <div 
            v-for="(move, index) in moves" 
            :key="index"
            :class="{ 'current-move': index === currentMoveIndex }"
          >
            {{ Math.floor(index/2) + 1 }}. {{ move }}
          </div>
        </div>
      </div>

      <ReplayControl
        :moves="moves"
        @move-change="handleMoveChange"
      />

      <div class="dialog-buttons">
        <button @click="$emit('close')">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ChessPiece from './ChessPiece.vue'
import ReplayControl from './ReplayControl.vue'

const props = defineProps<{
  show: boolean
  moves: string[]
  initialBoard: (string | null)[][]
}>()

const emit = defineEmits<{
  (e: 'close'): void
}>()

const currentMoveIndex = ref(-1)
const boardStates = ref<(string | null)[][][]>([props.initialBoard])

const getCellColor = (row: number, col: number) => {
  return (row + col) % 2 === 0 ? 'white-cell' : 'black-cell'
}

const getPiece = (row: number, col: number) => {
  return boardStates.value[currentMoveIndex.value + 1]?.[row]?.[col] || null
}

const handleMoveChange = (index: number) => {
  currentMoveIndex.value = index
}
</script>

<style scoped>
.replay-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  min-width: 800px;
}

.replay-board {
  display: grid;
  grid-template-columns: auto 200px;
  gap: 20px;
  margin: 20px 0;
}

.chess-board {
  width: 400px;
  height: 400px;
  border: 2px solid #333;
}

.board-row {
  display: flex;
  height: 12.5%;
}

.board-cell {
  width: 12.5%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.white-cell {
  background-color: #fff;
}

.black-cell {
  background-color: #b58863;
}

.move-list {
  height: 400px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #ccc;
}

.current-move {
  background-color: #e3f2fd;
  font-weight: bold;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style> 